import React, { Component } from 'react'
// import Swiper from 'swiper/js/swiper.js' // 引入js
import Swiper, {
  Pagination,
  Autoplay,
  Navigation,
  coverflowEffect,
  EffectCoverflow,
  EffectCube,
  EffectFade,
} from 'swiper'
import 'swiper/swiper.css'
import 'swiper/swiper-bundle.min.css'


export default class MySwipe extends Component {
  render() {
    const { id, children } = this.props
    return (
      <div className='swiper' id={id}>
        <div className='swiper-wrapper'>
          {
            children
          }
        </div>
      </div>
    )
  }

  // 插件实例化
  componentDidMount() {
    const { id, options } = this.props
    let thisSwiper = new Swiper('#' + id, options)
  }
}

MySwipe.defaultProps = {
  id: 'sone',
  options: {
    speed: 2000,
    antoplay: true,
  }
}

MySwipe.Item = ({
  children
}) => {
  return (
    <div className='swiper-slide'>
      {children}
    </div>
  )
}
